<template>
  <vxe-grid
    id="supplyMaterialTable"
    ref="supplyMaterialTable"
    v-bind="tableConfig"
    :tooltip-config="tableConfig.tooltipConfig"
    :data="supplyMaterialList"
    :keyboard-config="tableConfig.keyboardConfig">
    <template #component_title >
        <span style="color: black;font-size: 15px;font-weight: bolder !important;">
          <i class="fa fa-pencil-square-o" aria-hidden="true">&nbsp;
          </i>供应商材料管理</span>
    </template>
    <template #tool_button>
      <vxe-button
        title="新增供应商材料"
        style="padding-top: 3px;padding-left: 7px;margin-right:10px "
        icon="fa fa-plus"
        name="新增供应商材料"
        @click="insertEvent(-1)"
        circle v-if="!isDetail">
      </vxe-button>
    </template>

    <template #material="{row}">
      <m-entity-select
        v-model:value="row.materialId"
        @getWeightUnit="getWeightUnit($event,row)"
        placeholder="请选择材料"
        module="material"
        entity="Material"
        show-options-name="name"
        class="ele-fluid"
      />
    </template>

    <template #todayPrice="{row}">
      <a-input
        v-model:value="row.todayPrice"
        placeholder="请输入原材料价格"
        :maxlength="255"
        :suffix="row.material.weightUnit!==undefined?('元/'+row.material.weightUnit):''"
      />
    </template>

    <template #stock="{row}">
      <a-input
        v-model:value="row.stock"
        placeholder="请输入供应原材料库存"
        :maxlength="255"
        :suffix="row.material.weightUnit!==undefined?row.material.weightUnit:''"
      />
    </template>

    <template #operate="{ row }">
      <a-space>
        <a-popconfirm
          title="确定要删除此供应商材料吗？"
          @confirm="removeEvent(row)">
          <vxe-button icon="fa fa-trash" title="删除" circle></vxe-button>
        </a-popconfirm>
      </a-space>
    </template>
  </vxe-grid>

</template>

<script>
import {defineComponent} from 'vue'
import SupplyMaterialMapMannage from './js'
import MEntitySelect from "@/components/MEntity/entitySelect";

export default defineComponent({
  name: "MSupplyMaterialMannage",
  props: {
    supplierId: String,
    isDetail: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    supplyMaterials: Array,
    height:String,
  },
  components: {MEntitySelect},

  setup(props, context) {
    // context.$attrs(test)
    const {
      // changeStatus,
      tableConfig,
      supplyMaterialTable,
      supplyMaterialList,
      reload,
      supplyMaterialChange,
      insertEvent,
      removeEvent,
      getSupplyMaterialList,
      validAccounts,
      countRatio,
      recordMaterialId
    } = SupplyMaterialMapMannage(props, context)

    const getWeightUnit = async (item,row) =>{
      // console.log(item)
      // console.log(row)
      const $table = supplyMaterialTable.value
      row.materialId = item.eid
      row.material.weightUnit = item.weightUnit
      row.material.eid = item.eid
      await $table.reloadRow(row)
    }
    return {
      tableConfig,
      // changeStatus,
      supplyMaterialTable,
      supplyMaterialList,
      reload,
      supplyMaterialChange,
      insertEvent,
      removeEvent,
      getSupplyMaterialList,
      validAccounts,
      countRatio,
      recordMaterialId,
      getWeightUnit
    }

  },

})
</script>

<style>
.vxe-toolbar-mt {
  padding: 0 10px;
  background-color: #f6f6f6 !important;
}
</style>
